import React, { Component } from 'react';
import connect from './connect'
import { ListNav } from './style'

@connect
class List extends Component {
    state = {
        // 默认高亮显示的菜单
        currentIndex: 0,
        rightData: []
    }
    static getDerivedStateFromProps(props, state) {
        if (state.rightData.length === 0) {
            if(props.material[0]){
                return {rightData: props.material[0]['data']}
            }else{
                return null
            }
        } else {
            return null
        }
    }
    changeNav(index) {
        this.setState({
            currentIndex: index,
            rightData: this.props.material[index]['data']
        })
    }
    render() {
        // console.log(this.props.listDataIndex);
        return (
            <ListNav>
                <div>
                    {/* 左侧菜单 */}
                    <ul>
                        {
                            this.props.material && this.props.material.map((item, index) => (
                                this.state.currentIndex === index
                                    ?
                                    <li className="active" onClick={() => this.changeNav(index)} key={'cate_' + index}><span>{item.name}</span></li>
                                    :
                                    <li onClick={() => this.changeNav(index)} key={'cate_' + index}><span>{item.name}</span></li>
                            ))
                        }
                    </ul>
                </div >
                <div>
                    {/* 右侧选项 */}
                    <ul>
                        {
                            this.state.rightData.length > 0
                                ?
                                this.state.rightData.map((item, index) => (
                                    <li key={"right_" + index}>{item}</li>
                                ))
                                :
                                <li>加载中...</li>
                        }

                    </ul>
                </div>

            </ListNav>
        );
    }
}

export default List;
